<template>
  <div class="appointment-setting-container">
    <!-- 顶部标题 -->
    <div class="header">
      <h2>预约设置</h2>
      <h3>医生列表</h3>
    </div>

    <!-- 操作按钮区域 -->
    <div class="action-bar">
      <el-button type="primary" @click="handleAdd">
        <el-icon><Plus /></el-icon>添加
      </el-button>
      <el-button type="danger" :disabled="selectedItems.length === 0" @click="handleDelete">
        <el-icon><Delete /></el-icon>删除
      </el-button>

      <!-- 批量操作提示 -->
      <div class="batch-tip" v-if="selectedItems.length > 0">
        已选择{{ selectedItems.length }}项，可以进行批量操作
      </div>
    </div>

    <!-- 表格区域 -->
    <el-table
        :data="appointmentData"
        style="width: 100%"
        border
        @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="scheduleDate" label="日期" width="180" />
      <el-table-column  label="时间段" width="220" >
        <template #default="scope">
          {{ scope.row.timePeriod }}: {{ scope.row.startTime }}-{{ scope.row.endTime }}
        </template>
      </el-table-column>
      <el-table-column prop="appointmentType" label="业务类型" />
      <el-table-column label="操作" width="120">
        <template #default="scope">
          <el-button link type="primary" @click="handleEdit(scope.row)">
            <el-icon><Edit /></el-icon>编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue'
import {
  Plus,
  Delete,
  Edit
} from '@element-plus/icons-vue'
import axios from "axios";
import {ElMessage, ElMessageBox} from "element-plus";
import {router} from "@/router/index.js";

// 表格数据
const appointmentData = ref([])
const getAppointmentData=()=>{
  axios.get('/doctorSchedule/getDoctorSchedule').then(res=>{
    appointmentData.value = res.data.obj
  })
}
onMounted(()=>{
  getAppointmentData()
})
// 选中的项目
const selectedItems = ref([])

// 选择变化事件
const handleSelectionChange = (selection) => {
  selectedItems.value = selection
}



// 删除按钮事件=====================================
const handleDelete = () => {
  if (selectedItems.value.length === 0) return;
  ElMessageBox.confirm('确定要删除选中的医生吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 1. 提取ID数组
    const ids = selectedItems.value.map(item => item.id)

    // 2. 发送请求
    axios.post('/doctorSchedule/batchDeleteSchedule', ids, {
      headers: {
        'Content-Type': 'application/json'
      }
    }).then(res => {
      if (res.data.code === 200) {
        ElMessage.success('删除成功')
        getAppointmentData() // 刷新列表
        selectedItems.value = [] // 清空选中项
      } else {
        ElMessage.error(res.data.message || '删除失败')
      }
    }).catch(error => {
      ElMessage.error('删除失败: ' + error.message)
    })
  }).catch(() => {
    ElMessage.info('已取消删除')
  })
}

// 编辑按钮事件
const handleEdit = (row) => {
  router.push({
    name: 'addAppointmentSetting',
    params: { id: row.id }
  })
}
// 添加按钮事件
const handleAdd = () => {
  router.push({ name: 'addAppointmentSetting' })
}
</script>

<style scoped>
.appointment-setting-container {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.header {
  margin-bottom: 20px;
}

.header h2 {
  font-size: 20px;
  color: #333;
  margin-bottom: 10px;
}

.header h3 {
  font-size: 18px;
  color: #666;
}

.action-bar {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  gap: 15px;
}

.batch-tip {
  margin-left: 20px;
  color: #666;
  font-size: 14px;
}

.el-table {
  margin-top: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>